Next.js 인터셉션 라우트: 모달 및 오버레이 패턴 마스터하기

인기 있는 React 프레임워크인 Next.js는 고성능의 확장 가능한 웹 애플리케이션을 구축하기 위한 강력한 기능들을 제공합니다. 그중 하나인 인터셉션 라우트(Interception Routes)는 복잡한 라우팅 시나리오, 특히 모달 및 오버레이 패턴을 구현할 때 정교한 방법을 제공합니다. 이 종합 가이드에서는 인터셉션 라우트를 활용하여 원활하고 매력적인 사용자 경험을 만드는 방법을 탐색합니다.

인터셉션 라우트란 무엇인가?

인터셉션 라우트를 사용하면 브라우저의 URL을 변경하지 않고도 라우트를 가로채 다른 UI를 렌더링할 수 있습니다. 사용자 경험을 풍부하게 하는 일시적인 우회로라고 생각하면 됩니다. 이는 특히 다음과 같은 경우에 유용합니다:

• 모달: 새 페이지로 이동하지 않고 모달 창에 콘텐츠를 표시합니다.
• 오버레이: 기존 콘텐츠 위에 추가 정보나 컨트롤을 표시합니다.
• 이미지 갤러리: 이미지 갤러리 내에서 부드러운 페이지 이동과 같은 탐색 경험을 만듭니다.
• 온보딩 플로우: 전체 페이지 새로고침 없이 다단계 프로세스를 통해 사용자를 안내합니다.

모달 및 오버레이에 인터셉션 라우트를 사용하는 이유는 무엇인가?

모달 및 오버레이를 처리하는 전통적인 방법은 종종 컴포넌트 내에서 상태를 관리해야 하므로 복잡해지고 성능 문제를 야기할 수 있습니다. 인터셉션 라우트는 여러 가지 이점을 제공합니다:

• 향상된 SEO: 모달이나 오버레이에 표시되는 콘텐츠는 특정 라우트와 연결되어 있으므로 검색 엔진에 계속 액세스할 수 있습니다.
• 공유 가능한 URL: 사용자는 모달이나 오버레이 콘텐츠에 대한 직접 링크를 공유할 수 있습니다.
• 브라우저 히스토리: 브라우저의 뒤로 가기 및 앞으로 가기 버튼이 예상대로 작동하여 사용자가 모달 히스토리를 탐색할 수 있습니다.
• 단순화된 상태 관리: 모달 가시성 상태 관리의 복잡성을 줄여 더 깨끗하고 유지 관리하기 쉬운 코드를 만듭니다.
• 향상된 성능: 모달 콘텐츠만 업데이트하여 불필요한 리렌더링을 방지합니다.

Next.js에서 인터셉션 라우트 설정하기

실용적인 예제를 통해 인터셉션 라우트를 구현하는 방법을 설명해 보겠습니다: 전자 상거래 애플리케이션에서 제품 상세 정보를 표시하기 위한 모달 만들기.

프로젝트 구조

먼저, 디렉토리 구조를 정의해 보겠습니다. 각 제품에 고유 ID가 있는 `products` 디렉토리가 있다고 가정합니다.

app/
  products/
    [id]/
      page.js       // Product details page
    @modal/
      [id]/
        page.js   // Modal content for product details
    default.js  // Layout for products directory
  page.js           // Home page

설명

• `app/products/[id]/page.js`: 기본 제품 상세 페이지입니다.
• `app/products/@modal/[id]/page.js`: 모달 콘텐츠를 렌더링할 인터셉션 라우트를 정의합니다. `@modal` 규칙에 주목하세요 – 이것은 Next.js가 인터셉션 라우트를 인식하는 데 매우 중요합니다.
• `app/products/default.js`: `products` 디렉토리의 레이아웃입니다. 이 레이아웃 안에 `@modal` 라우트를 감싸는 것이 필요합니다.
• `app/page.js`: 우리 제품으로 연결되는 링크를 포함할 홈페이지입니다.

코드 구현

1. 홈페이지 (app/page.js)

이 페이지는 제품 목록을 표시하며, 각 제품에는 제품 상세 정보를 모달로 여는 링크가 있습니다.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Laptop' },
 { id: '2', name: 'Smartphone' },
 { id: '3', name: 'Tablet' },
];

export default function Home() {
 return (
 

 
Product List
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

2. 제품 상세 페이지 (app/products/[id]/page.js)

이 페이지는 전체 제품 상세 정보를 렌더링합니다. 실제 애플리케이션에서는 API나 데이터베이스에서 데이터를 가져올 것입니다. 중요하게, 원래 제품 목록으로 돌아가는 링크를 제공합니다.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Product Details
 
Product ID: {id}
 
This is the full product details page.
 Back to Product List
 
 );
}

3. 모달 콘텐츠 (app/products/@modal/[id]/page.js)

이 부분이 핵심인 인터셉션 라우트입니다. 동일한 제품 ID를 사용하여 모달 콘텐츠를 렌더링합니다. ID에 접근하기 위해 `useParams` 훅을 사용하는 점에 주목하세요.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Product Modal
 
Product ID: {id}
 
This content is rendered within a modal!
  history.back()}>Close Modal
 
 
 );
}

참고: `'use client';` 지시문은 클라이언트 측 상호작용, 특히 `useParams`를 사용할 때 필요합니다.

스타일링 (modal.module.css): 기본 모달 스타일링을 위해 간단한 CSS 모듈이 사용됩니다. 이는 모달을 올바르게 배치하는 데 중요합니다.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. 레이아웃 (app/products/default.js)

이 레이아웃은 `@modal` 라우트를 감싸서 제품 컨텍스트 내에서 렌더링되도록 보장합니다.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 
 );
}

작동 방식

1. 사용자가 홈페이지에서 제품 링크(예: `/products/1`)를 클릭하면 Next.js는 이를 `products` 디렉토리 내의 라우트로 인식합니다.
2. `@modal` 인터셉션 라우트 때문에 Next.js는 `@modal` 아래에 일치하는 라우트가 있는지 확인합니다.
3. 일치하는 항목(예: `/products/@modal/1`)이 발견되면 Next.js는 `app/products/@modal/[id]/page.js`의 콘텐츠를 현재 페이지 내에서 렌더링합니다. 브라우저의 URL은 `/products/1`로 유지됩니다.
4. `modalOverlay` 스타일은 모달을 기본 콘텐츠 위에 위치시킵니다.
5. "모달 닫기"를 클릭하면 `history.back()`을 사용하여 뒤로 이동하며, 효과적으로 모달을 닫고 이전 상태로 돌아갑니다.

고급 인터셉션 라우트 기법

1. 뒤로 가기 버튼 처리

모달 구현의 중요한 측면은 브라우저의 뒤로 가기 버튼이 올바르게 작동하도록 보장하는 것입니다. 사용자가 모달을 열고 뒤로 가기 버튼을 클릭하면, 애플리케이션에서 다른 곳으로 이동하는 것이 아니라 이상적으로는 모달을 닫고 이전 컨텍스트로 돌아가야 합니다.

예제에서 사용된 `history.back()` 메서드는 브라우저 히스토리에서 한 단계 뒤로 이동하여 이 효과를 달성합니다. 그러나 더 복잡한 시나리오에서는 현재 라우팅 상태를 고려하는 사용자 정의 뒤로 가기 버튼 핸들러를 구현해야 할 수도 있습니다.

2. 동적 모달 콘텐츠

실제 애플리케이션에서는 모달 콘텐츠가 제품 ID를 기반으로 API나 데이터베이스에서 가져온 동적인 내용일 가능성이 높습니다. 모달 컴포넌트 내에서 `fetch` API나 SWR 또는 React Query와 같은 데이터 가져오기 라이브러리를 사용하여 필요한 데이터를 검색할 수 있습니다.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Replace with your API endpoint
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Loading...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... other product details ... */}
  history.back()}>Close Modal
 
 );
}

3. 중첩된 모달

인터셉션 라우트를 중첩하여 복잡한 모달 워크플로우를 만들 수 있습니다. 예를 들어, 사용자가 제품 상세 모달을 열고 버튼을 클릭하여 관련 제품 모달을 열 수 있습니다. 이는 `@modal` 디렉토리 내에 추가적인 인터셉션 라우트를 생성하여 달성할 수 있습니다.

4. 404 오류 처리

사용자가 유효하지 않은 제품 ID(예: `/products/@modal/nonexistent`)를 가진 모달 URL로 이동하는 시나리오를 고려해야 합니다. 사용자 친화적인 404 페이지를 표시하거나 사용자를 유효한 제품 페이지로 리디렉션하는 적절한 오류 처리를 구현해야 합니다.

// app/products/@modal/[id]/page.js

// ... (rest of the component)

 if (!product) {
 return 
Product not found.
; // Or redirect to a 404 page
 }

// ... (rest of the component)

5. 오버레이 패턴

지금까지의 예제는 모달에 중점을 두었지만, 인터셉션 라우트는 오버레이에도 사용할 수 있습니다. 콘텐츠를 중앙에 배치하는 대신, 오버레이는 사이드바나 화면 측면에서 슬라이드되는 패널로 나타날 수 있습니다. CSS 스타일링은 다르겠지만, 라우팅 로직은 동일하게 유지됩니다.

실제 사례 및 사용 예시

• 전자상거래: 제품 상세 정보, 쇼핑 카트 요약 또는 결제 흐름을 모달이나 오버레이에 표시.
• 소셜 미디어: 이미지 미리보기, 댓글 섹션 또는 사용자 프로필을 모달에 표시.
• 문서 관리: 문서 미리보기, 편집 도구 또는 버전 기록을 오버레이에 표시.
• 지도 애플리케이션: 위치 세부 정보, 관심 지점 또는 경로 정보를 오버레이에 표시.
• CRM 시스템: 연락처 세부 정보, 활동 로그 또는 영업 기회를 모달에 표시.

예시: 국제 전자상거래 플랫폼 글로벌 전자상거래 사이트를 상상해 보세요. 사용자가 제품을 클릭하면 상세 정보가 모달로 열립니다. URL은 `/products/[product_id]`로 변경되어 직접 링크 및 SEO 이점을 제공합니다. 사용자가 모달 페이지에서 언어를 전환하면(예: 영어에서 스페인어로), 제품 상세 정보는 선택된 언어로 가져와지고 모달 콘텐츠는 원활하게 업데이트됩니다. 또한, 사이트는 (동의 하에) 사용자의 위치를 감지하고 해당 지역과 관련된 배송 정보를 모달 내에 표시할 수 있습니다.

인터셉션 라우트 사용을 위한 모범 사례

• 모달 콘텐츠는 간결하게 유지: 모달에 너무 많은 정보를 과도하게 담지 마세요. 필수적인 세부 정보를 제시하는 데 집중하세요.
• 명확한 내비게이션 제공: 사용자가 쉽게 모달을 닫고 이전 컨텍스트로 돌아갈 수 있도록 하세요.
• 모바일에 최적화: 모달 레이아웃을 반응형으로 디자인하여 작은 화면에서도 사용자 친화적이도록 하세요.
• 철저한 테스트: 다양한 브라우저와 기기에서 모달 동작을 테스트하여 일관된 경험을 보장하세요.
• 접근성 고려: 적절한 ARIA 속성과 키보드 내비게이션을 구현하여 장애가 있는 사용자도 모달에 접근할 수 있도록 하세요.

인터셉션 라우트의 대안

인터셉션 라우트는 모달 및 오버레이 패턴에 대한 강력한 해결책을 제공하지만, 다른 접근 방식도 고려할 수 있습니다:

• 전통적인 상태 관리: React의 `useState` 훅이나 Redux 또는 Zustand와 같은 상태 관리 라이브러리를 사용하여 모달 가시성을 제어합니다. 이는 매우 기본적인 모달 구현에는 더 간단하지만, 규모가 커지면 관리하기 어려워집니다.
• 타사 모달 라이브러리: React Modal이나 Material UI와 같은 라이브러리의 사전 구축된 모달 컴포넌트를 활용합니다. 이는 빠른 해결책을 제공할 수 있지만 사용자 정의 옵션이 제한될 수 있습니다.
• 클라이언트 측 라우팅 라이브러리: React Router와 같은 라이브러리를 사용하여 클라이언트 측 라우팅 및 모달 가시성을 관리할 수 있습니다.

결론

Next.js 인터셉션 라우트는 웹 애플리케이션에서 모달 및 오버레이 패턴을 구현하는 견고하고 우아한 방법을 제공합니다. 이 강력한 기능을 활용하여 원활하고 SEO 친화적이며 사용자 친화적인 경험을 만들 수 있습니다. 대안적인 접근 방식이 존재하지만, 인터셉션 라우트는 독특한 조합의 이점을 제공하여 모든 Next.js 개발자의 무기고에서 가치 있는 도구가 됩니다.

추가 자료

• Next.js 인터셉션 라우트 공식 문서
• React 공식 문서